<template>
    <v-container fluid style="height: 100%" v-loading="loading">
        <v-layout row warp align-center justify-center fill-height>
            <v-flex xs3>
                <v-card>
                    <v-card-title>Register IN+</v-card-title>
                    <v-card-text>
                        <register-form v-model="form" @submit="onRegisterSubmit" ref="form" :error-messages="errors"/>
                    </v-card-text>

                    <v-card-actions>
                        <v-btn @click="$refs['form'].onSubmit()" color="primary">Submit</v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
        </v-layout>
    </v-container>
</template>

<script>
    import RegisterForm from "@/components/form/RegisterForm";
    import api from '@/comment/apis/user/Info';

    export default {
        components: {RegisterForm},
        data() {
            return {
                loading: false,
                errors: {},
                form: {}
            }
        },
        methods: {
            onRegisterSubmit() {
                this.loading = true;
                api.register(this.form).then(res => {
                    this.$util.handelHttpResponse(res, true, '注册成功', false).then(() => {
                        this.$router.replace({name: 'Login'})
                    }).catch(({msg}) => {
                        this.errors = msg;
                    });
                }).finally(() => this.loading = false);
            }
        }
    };
</script>

<style scoped>

</style>